<template>
<div>
    <van-nav-bar title="昵称" left-arrow @click-left="onClickLeft" />
            <van-cell-group>
          <van-field
            v-model="username"
            clearable
            :placeholder="mobile"
            :error-message="error.username"
          />
        </van-cell-group>
        <van-row class="a">请输入4~20个字符</van-row>
       <van-button round class="btn" @click="upUsername">保存</van-button>

    </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)
export default {
  data () {
    return {
      username: '',
      mobile: '',
      error: {
        username: ''
      }
    }
  },
  created () {
    this.mobile = sessionStorage.getItem('mobile')
  },
  methods: {
    onClickLeft () {
      this.$router.push('/me')
    },
    async upUsername () {
      if (this.username.length < 4 || this.username > 20) {
        this.error.username = '请输入4~20个字符'
        return false
      }
      const { data: res } = await this.$http.get('/upUsername', { params: { mobile: this.mobile, username: this.username } })
      // console.log(res.ok)
      if (res.ok === 1) {
        sessionStorage.setItem('mobile', this.username)
        Toast('保存成功!')
      }
    }
  }
}
</script>

<style scoped>
.btn {
  color: #fff;
  width: 73%;
  margin-left: 15%;
  margin-top: 15%;
  font-size: 127%;
  background: -webkit-linear-gradient(left, #fa1e8c 0, #fc1e56 100%);
}
.a{
  font-size: 15px;
  color:#ccc;
  margin-top: 15px;
  margin-left: 14px;
}
</style>
